// 将“FFFFFF” 字符串转换为 [255, 255, 255]
init_color = function(str){
    str += "";
    let ints = [255, 255, 255];
    let key = 0;
    for(let i=0,ln=str.length;i<ln;i++){
        if(key > 2) {
            break;
        }
        if(i!==0 && (i+1)%2===0) {
            let numStr = str.substr(i-1, 2);
            ints[key] = parseInt(numStr,16);
            key++;
        }
    }
    return ints
};

get_qrcode_image = function(list, spoof_id){
    let p_url = list.Args[0].Value;
    p_url += "?ID="+spoof_id;
    for (let i=1,ln=list.Args.length;i<ln;i++) {
        let arg = list.Args[i];
        p_url += "&" + arg.Key + "=" + arg.Value
    }
    p_url = encodeURIComponent(p_url);
    let p_size = list.Size;
    let p_quality = 100;
    let p_blur = list.Blur;
    let url = "/qrcode/generate?Url=" + p_url + "&Size=" + p_size + "&Quality=" + p_quality + "&Blur=" + p_blur;
    let ints = init_color(list.FrontColor);
    url += "&FrontR=" + ints[0] +"&FrontG=" + ints[1] + "&FrontB=" + ints[2] + "&FrontA=" + list.FrontAlpha;
    ints = init_color(list.BackColor);
    url += "&BackR=" + ints[0] +"&BackG=" + ints[1] + "&BackB=" + ints[2] + "&BackA=" + list.BackAlpha;
    return url;
};

Vue.component("spoof", {
    template:"#result-tpl",
    props:["spoof"],
    data: function () {
        return {
            image:"",
            updating: false,
        }
    },
    watch: {
        '$props':{
            handler: function (val, oldVal) {
                let $this = this;
                if (!this.updating) {
                    this.updating = true;
                    // 等待结果渲染完成之后，将结果转换为单一图片
                    $this.$nextTick(function () {
                        setTimeout(function () {
                            $this.update();
                            $this.updating = false;
                        }, 2000);
                    });
                }
            },
            deep: true
        }
    },
    mounted: function () {
        this.update()
    },
    methods:{
        update: function(){
            let $this = this;
            html2canvas($this.$el.querySelector(".result-container")).then(function(canvas) {
                $this.image = canvas.toDataURL();
            });
            $this.updating = false
        },
        init_list_img: function(list, spoof_id){
            switch (list.Kind) {
                case "upload-image":
                    return list.UploadImage;
                case "image":
                    return list.Image;
                case "input-text":
                    if(!!list.InputTpl){
                        let str = list.InputTpl.replace(/XXX/g, list.InputText);
                        return this.generate_image_by_text(str, list);
                    } else {
                        return ""
                    }
                case "time":
                    if(!!list.InputTpl){
                        let t = new Date();
                        let year = t.getFullYear(), month = t.getMonth(), day = t.getDate(), hour = t.getHours(),
                            minute = t.getMinutes(), second = t.getSeconds();
                        let str = list.InputTpl.replace(/{YEAR}/g, year);
                        str = str.replace(/{MONTH}/g, month);
                        str = str.replace(/{DAY}/g, day);
                        str = str.replace(/{HOUR}/g, hour);
                        str = str.replace(/{MINUTE}/g, minute);
                        str = str.replace(/{SECOND}/g, second);
                        return this.generate_image_by_text(str, list);
                    } else {
                        return ""
                    }
                case "text":
                    return this.generate_image_by_text(list.Text, list);
                case "qrcode":
                    return get_qrcode_image(list, spoof_id);
                case "group":
                    return this.init_list_img(list.Group[list.SelectedItemKey])
            }
        },
        get_qrcode_image: function(list, spoof_id){
            return get_qrcode_image(list, spoof_id)
        },
        generate_image_by_text: function(text, list) {
            if(!!text&&!!list.Font&&!!list.Size) {
                let url = "/fonts/generate-image?Text=" + text + "&Font=" + list.Font + "&FontSize=" + list.Size + "&Blur=" + list.Blur;
                let ints = init_color(list.FrontColor);
                url += "&FrontR=" + ints[0] + "&FrontG=" + ints[1] + "&FrontB=" + ints[2] + "&FrontA=" + list.FrontAlpha;
                return url
            }
        }
    },
});